<template>
  <el-dialog
    @close="handleClose(false)"
    close-on-press-escape
    v-dialogDrag
    @open="handleOpen"
    :title="'分配菜单-' + dialogTitle"
    :close-on-click-modal="false"
    :lock-scroll="false"
    :visible="showDialog"
    width="650px"
  >
    <tree-transfer
      class="role_admin_tree"
      :title="title"
      :from_data="fromData"
      :to_data="toData"
      :defaultCheckedKeys="defaultCheckedKeys"
      :defaultProps="defaultProps"
      @add-btn="add"
      @remove-btn="remove"
      :mode="mode"
      filter
      openAll
      pid="parentId"
      ref="treeRes"
    >
    </tree-transfer>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="dialogTitle !== 'super_admin'"
    >
      <el-button size="mini" @click="handleClose(false)">取 消</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="submitForm('formRef')"
        :loading="btnLoadin"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import treeTransfer from "el-tree-transfer"; // 引入
import { getMenuTree, useMenus } from "@/api/userAuth";
import { resetRouter } from "@/router";
import router from "@/router";
import Layout from "@/layout";
import {
  arrayTreeAddLevel,
  filter,
  lookForAllId,
  lookForAllIdPid,
} from "./index";
import _ from "lodash";
export default {
  components: { treeTransfer }, // 注册
  props: {
    dialogTitle: {
      type: String,
      default: "",
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    roleId: {
      type: [String, Number],
      default: "",
    },
  },
  computed: {
    user() {
      return this.$store.state.user.user;
    },
  },
  data() {
    return {
      defaultCheckedKeys: [],
      defaultProps: {
        label: "name",
        children: "children",
        isLeaf: "leaf",
        pid: "parentId",
      },
      menuIds: "",
      mode: "transfer", // transfer addressList
      title: ["分配菜单选择", "分配菜单已选择"],
      fromData: [],
      toData: [],
      btnLoadin: false,
    };
  },
  methods: {
    addToAims() {
      this.$refs.treeRes.addToAims(true);
    },
    async submitForm() {
      const isRole = this.$store.state.user.user.roleList.includes(this.roleId);
      this.btnLoadin = true;
      await useMenus({
        menuIds: this.menuIds,
        roleId: this.roleId,
      });
      this.$msg({
        type: "success",
        message: "分配成功",
      });

      this.btnLoadin = false;
      this.handleClose();
      if (isRole) {
        location.reload();
      }
      // if (isRole) {
      //   this.$confirm(
      //     "当前用户属于此角色,分配菜单刷新后生效,是否刷新?",
      //     "提示",
      //     {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       type: "warning",
      //     }
      //   )
      //     .then(async () => {
      //       this.btnLoadin = true;
      //       await useMenus({
      //         menuIds: this.menuIds,
      //         roleId: this.roleId,
      //       });
      //       this.$msg({
      //         type: "success",
      //         message: "分配成功",
      //       });

      //       this.btnLoadin = false;
      //       this.handleClose();
      //       location.reload();
      //     })
      //     .catch((r) => {
      //       this.btnLoadin = false;
      //     });
      // } else {
      // }
    },
    handleOpen() {
      this.getMenuTree();
    },
    async getMenuTree() {
      const res = await getMenuTree({ roleId: this.roleId });
      let data = res.data.data;
      // 添加层级标识   子集未全部选中的 父节点checked  false
      data = arrayTreeAddLevel(data);

      this.fromData = data;
      console.log("filter(data, true) :>> ", data);
      this.defaultCheckedKeys = lookForAllId(filter(data, true));
      this.$nextTick(() => {
        this.addToAims();
      });
    },
    handleClose() {
      this.defaultCheckedKeys = [];
      this.fromData = [];
      this.toData = [];
      this.$emit("update:showDialog", false);
    }, // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象

      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
      this.menuIds = lookForAllIdPid(toData).join(",");
      console.log("  this.menuIds :>> ", this.menuIds);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
      this.menuIds = lookForAllIdPid(toData).join(",");
      console.log("  this.menuIds :>> ", this.menuIds);
    },
  },
};
</script>

<style lang='scss'>
.role_admin_tree {
  label {
    width: auto;
  }
}

.transfer-title {
  margin-top: 0;
  margin-bottom: 10px;
  span {
    font-size: 18px;
  }
}
</style>